<template>
  <div class="content-box">
    <div id="airline-box">
      <div class="aircraft-box">
        <svg
          class="icon"
          aria-hidden="true"
          style="font-size: 30px; display: inline-block; margin-right: 5px"
        >
          <use
            :xlink:href="'#' + ticketInfo.flightInfo.aircraftInfoDTO.logo"
          ></use>
        </svg>
        <span class="flight-number" style="text-decoration: underline">{{
          ticketInfo.flightInfo.aircraftInfoDTO.airlineSimpleName +
          ticketInfo.flightInfo.number
        }}</span>
        <span class="aircraft-model">{{
          ticketInfo.flightInfo.aircraftInfoDTO.model
        }}</span>
      </div>
    </div>
    <div class="flight-box">
      <span><b>当前状态： </b> {{ ticketInfo.flightInfo.statusInfo }} </span>
      <FlightCalendar :flightInfo="ticketInfo.flightInfo"></FlightCalendar>
    </div>
    <a-popconfirm title="您确定要退票吗？" @confirm="confirmRefund" ok-text="确定" cancel-text="取消">
      <template #icon><question-circle-outlined style="color: red" /></template>
      <a-button type="primary" danger style="width: 20%" :loading="loadingRefund">退票</a-button>
    </a-popconfirm>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { refundTicketApi, TicketInfo } from "../api/ticketApi";
import FlightCalendar from "./FlightCalendar.vue";
import { QuestionCircleOutlined } from "@ant-design/icons-vue";
import { HTTP_STATUS } from "../api/request";
import { message } from "ant-design-vue";

const props = defineProps(["ticketInfo"]);
const emits = defineEmits(["refund"])

const ticketInfo = ref<TicketInfo>(props.ticketInfo);
const loadingRefund = ref<boolean>(false)

function confirmRefund() {
    loadingRefund.value = true
    setTimeout(async () => {
        try {
            const res : any = await refundTicketApi(ticketInfo.value.flightInfo.id)
            if (res.status == HTTP_STATUS.SUCCESS) {
                message.success("退票成功")
                emits('refund')
            }
        } catch (error) {
        } finally {
            loadingRefund.value = false
        }
    })
}
</script>

<style lang="scss" scoped>
@import "../assets/css/variables.scss";

.content-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 100%;
  width: 100%;
  .aircraft-box {
    transform: scale(1.5);
    width: 100%;
    align-self: flex-start;
    margin-top: 10%;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    .flight-number {
      flex-basis: 50%;
    }

    .aircraft-model {
      display: inline-block;
      text-align: center;
      width: 100%;
      color: $fontGrayColor;
      flex-basis: 100%;
    }
  }

  .flight-box {
    transform: scale(1.3);
    margin-top: 20%;
  }
}
</style>
